<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title></title>
	<meta charset="utf-8" />
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
	<script src="UEditor/ueditor.config.js"></script>
	<script src="UEditor/ueditor.all.js"></script>
	<style type="text/css">
		.my-navbar {
			padding: 20px 0;
			transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;
		}

		nav ul:first-child a,
		.navbar-brand {
			background: transparent !important;
			color: #fff
		}

		.my-navbar a:hover {
			color: #45bcf9 !important;
			background: transparent;
			outline: 0
		}

		.my-navbar a {
			transition: color 0.5s ease-in-out;
		}

		/*-webkit-transition ;-moz-transition*/
		.top-nav {
			padding: 0;
			background: #000;
		}

		button.navbar-toggle {
			background-color: #fbfbfb;
		}

		/*整个背景都是transparent透明的，会看不到，所以再次覆盖一下*/
		button.navbar-toggle>span.icon-bar {
			background-color: #dedede
		}

		.navbar {
			padding-left: 40px;
		}

		.dropdown-toggle,
		.glyphicon-off {
			color: white;
			font-size: 15px;
		}

		/* .dropdown {
				margin-left: 600px;
			} */

		.dropdown-toggle:hover {
			color: white;
		}

		.alert-warning {
			height: 130px;
			margin-top: 20px;
		}

		.btn-danger,
		.btn-default {
			width: 100px;
		}

		.page-header {
			margin-top: 0px;
			padding: 0;
		}

		.page-header h1 {
			padding: 0;
			margin-top: 0;
			font-size: 16px;
		}

		.search {
			border: 1px solid #000;
			border-top: none;
			padding: 10px;
		}

		.nav-tabs a {
			border-bottom: none;
		}

		.chaozhuo .dropdown-toggle {
			background: #3a3f44;
			color: white;
		}
	</style>
</head>

<body>
	<nav class="navbar navbar-fixed-top my-navbar top-nav" role="navigation">
		<div class="container-fluid">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle" data-toggle="collapse"
					data-target="#example-navbar-collapse">

					<span class="glyphicon glyphicon-list"></span>

				</button>
				<a class="navbar-brand" href="#">重庆工程学院</a>
			</div>
			<div class="collapse navbar-collapse" id="example-navbar-collapse">
				<ul class="nav navbar-nav" style="padding:-10px;">
					<li class=""><a href="index.html" class="glyphicon glyphicon-home">&nbsp后台首页</a></li>
					<li><a href="usermanage.html" class="glyphicon glyphicon-user">&nbsp用户管理</a></li>
					<li><a href="contentmanage.html" class="glyphicon glyphicon-list-alt"
							style="color: #45bcf9">&nbsp内容管理</a></li>
					<li><a href="tagmanage.html" class="glyphicon glyphicon-tags">&nbsp便签的管理</a></li>
				</ul>
				<ul class="nav navbar-nav navbar-right" style="padding-right: 60px ;padding-top: 10px;">
					<div class="dropdown">
						<span class="btn dropdown-toggle" data-toggle="dropdown">
							管理员
							<span class="caret"></span>
						</span>
						<ul class="dropdown-menu">
							<li>
								<a href="#" class="glyphicon glyphicon-home">&nbsp;前台首页</a>
							</li>
							<li>
								<a href="personalpage.html" class="glyphicon glyphicon-user">&nbsp;个人主页</a>
							</li>
							<li>
								<a href="#" class="glyphicon glyphicon-cog">&nbsp;个人设置</a>
							</li>
							<li>
								<a href="#" class="glyphicon glyphicon-credit-card">&nbsp;账户中心</a>
							</li>
							<li>
								<a href="#" class="glyphicon glyphicon-heart">&nbsp;我的收藏</a>
							</li>


						</ul>
						<li class="glyphicon glyphicon-off"><a href="" style="color: white;">退出</a></li>

				</ul>
			</div>
		</div>
	</nav>
	<!-- 左边list -->
	<div class="container">
		<div class="row">
			<ul class="col-md-2">
				<div class="list-group">
					<div class="list-group leftselect">
						<a href="javascript:;" class="list-group-item  active">内容管理</a>
						<a href="javascript:;" class="list-group-item">添加内容</a>
					</div>
				</div>
			</ul>



			<div class="col-md-10">
				<div class="page-header">
					<h1>内容管理</h1>
				</div>
				<ul class="nav nav-tabs select">
					<li class="active"><a href="javascript:;">内容管理</a></li>
					<li><a href="javascript:;">添加内容</a></li>
				</ul>
				<form action="" method="" class="search">
					<table class="table">
						<thead>
							<tr>
								<th>文章标题</th>
								<th>作者</th>
								<th>发布时间</th>
								<th>操作</th>

							</tr>
						</thead>
						<tbody>

						</tbody>

					</table>
					<ul class="pagination pull-right">
						<li class="pre1"><a href="#" class="pre">&laquo;</a></li>
						<li class="active"><a href="#">1</a></li>
						<li><a href="#">2</a></li>
						<li><a href="#">3</a></li>
						<li><a href="#">4</a></li>
						<li><a href="#">5</a></li>
						<li class="next1"><a href="#" class="next">&raquo;</a></li>
					</ul>
				</form>
				<form action="" method="" class="addcontent" style="display: none;">
					<div class="form-group">
						<label for="title_content">
							标题
						</label>
						<input type="text" class="form-control" id="title_content" placeholder="请输入文章标题">
					</div>
					<div class="form-group">
						<label for="myn">文章内容：</label>

						<script id="myn" name="content" type="text/plain" style="height: 300px;border: 1px solid #000;">
								        </script>
						<button type="button" class="btn btn-primary submit">
							提交
						</button>
					</div>
				</form>
			</div>
		</div>


	</div>
	<footer>
		<div class="row">
			<div class="col-md-12 text-center navbar-static-bottom" style="margin-top: 30PX;">
				Copyright @ 2019-2020

			</div>
		</div>
	</footer>
	<!-- 模态框 -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
						&times;
					</button>
					<h4 class="modal-title" id="myModalLabel">
						修改用户
					</h4>
				</div>
				<div class="modal-body">
					<form action="" method="">


						<div class="form-group">
							<label for="username">标题</label>
							<input class="form-control" type="text" id="title" placeholder="用户名" required>
						</div>
						<div class="form-group">
							<label for="pass">作者</label>
							<input class="form-control" type="text" id="author" placeholder="作者">
						</div>
						<div class="form-group">
							<label for="pass">发布时间</label>
							<input class="form-control" type="email" id="publish" placeholder="请输入发布时间">
						</div>

					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-light" data-dismiss="modal" style="background:#3e444c">关闭
					</button>
					<input type="submit" class="btn btn-primary submit_updata"" value=" 修改">


				</div>
			</div><!-- /.modal-content -->
		</div><!-- /.modal -->
	</div>
</body>

</html>
<script type="text/javascript">
	var onResize = function () {
		// apply dynamic padding at the top of the body according to the fixed navbar height
		$("body").css("padding-top", $(".navbar-fixed-top").height() * 1.5);
	};

	// attach the function to the window resize event
	$(window).resize(onResize);

	// call it also when the page is ready after load or reload
	$(function () {
		onResize();
	});


	function ajax() {
		$.ajax({
			type: "get", //发送请求的类型post，get
			dataType: "json", //默认是text
			url: `http://127.0.0.1:7300/mock/5ee96c5cc5fadd342c8a0931/totalData/getArticleContent`, //发送的地址
			// data: "username="+$("#username").val()+"password="+$("#password").val()+"",//传递的参数
			success: function (msg) { //成功的回调
				var data = msg.data

				for (var i = 0; i < data.length; i++) {
					$('.table tbody').append(`<tr class='well rowinfo'>
										<td class="rawinfo">${data[i].title}</td>
										<td class="rawinfo1">${data[i].userName}</td>
										<td class="rawinfo2">${data[i].date}</td>
										<td>
											<div class="btn-group chaozhuo">
												<button type="button" class="btn btn-dark" style="background-color: #3a3f44;">操作</button>
												<button type="button" class="btn btn-dark dropdown-toggle" data-toggle="dropdown">
													<span class="caret" style="color: #fff;"></span>
													<span class="sr-only">切换下拉菜单</span>
												</button>
												<ul class="dropdown-menu operate" role="menu">
													<li class="edit"><a href="#" data-toggle="modal" data-target="#myModal">编辑</a></li>
													<li><a href="#">删除</a></li>
													<li class="top"><a href="#">全局置顶</a></li>
												</ul>
											</div>
										</td>
										</td>
									</tr>`)
				}
				var ue = UE.getEditor('myn');



				$('.submit').click(function () {
					let title = $('#title_content').val()
					let content = ue.getPlainTxt()
					let pub = msg
					if (confirm(`确定发布标题为${title}内容为：${content}的文章?`)) {
						if (!pub.pub_atatus) {
							alert('文章发布成功!')
							var contentnew = `<tr class='well rowinfo'>
												<td class="rawinfo">${title}</td>
												<td class="rawinfo1">管理员</td>
												<td class="rawinfo2">${new Date().getFullYear()}-${new Date().getMonth() + 1}-${new Date().getDate()}</td>
												<td>
													<div class="btn-group chaozhuo">
														<button type="button" class="btn btn-dark" style="background-color: #3a3f44;">操作</button>
														<button type="button" class="btn btn-dark dropdown-toggle" data-toggle="dropdown">
															<span class="caret" style="color: #fff;"></span>
															<span class="sr-only">切换下拉菜单</span>
														</button>
														<ul class="dropdown-menu operate" role="menu">
															<li class="edit"><a href="#" data-toggle="modal" data-target="#myModal">编辑</a></li>
															<li><a href="#">删除</a></li>
															<li class="top"><a href="#">全局置顶</a></li>
														</ul>
													</div>
												</td>
												</td>
											</tr>`
							$(contentnew).insertBefore($('.rowinfo:first'))
							var currentPage = 0
							var pageSize = 6;//每一页显示的数目
							$('table').find('tbody tr').hide().slice(currentPage * pageSize, (currentPage + 1) * pageSize).show();
							$('.pagination li').not('.pre1').not('.next1').click(function () {
								currentPage = $(this).text() - 1
								$('table').find('tbody tr').hide().slice(currentPage * pageSize, (currentPage + 1) * pageSize).show();
							})
							var sumRows = $('table').find('tbody tr').length;
							var sumPages = Math.ceil(sumRows / pageSize);//总页数  
							$('.pagination li').not('.pre1').not('.next1').hide().slice(0, sumPages).show()
							$('.select li').eq(1).removeClass('active')
							$('.select li').eq(0).addClass('active')
							$('.addcontent').hide()
							$('.search').show()

						}
						else {
							alert('文章发布失败')
						}
					}
				})//end


				console.log(data)

//分页
				var currentPage = 0
				var pageSize = 6;//每一页显示的数目
				$('table').find('tbody tr').hide().slice(currentPage * pageSize, (currentPage + 1) * pageSize).show();
				$('.pagination li').not('.pre1').not('.next1').click(function () {
					currentPage = $(this).text() - 1
					$('table').find('tbody tr').hide().slice(currentPage * pageSize, (currentPage + 1) * pageSize).show();
				})
				var sumRows = $('table').find('tbody tr').length;
				var sumPages = Math.ceil(sumRows / pageSize);//总页数  
				$('.pagination li').not('.pre1').not('.next1').hide().slice(0, sumPages).show()

				$('.edit').click(function () {
					var title
					var author
					var publish
					$('#title').val($(this).parents('.rowinfo').find('.rawinfo').html())
					$('#author').val($(this).parents('.rowinfo').find('.rawinfo1').html())
					$('#publish').val($(this).parents('.rowinfo').find('.rawinfo2').html())
					$('.submit_updata').off().click(() => {
						title = $('#title').val()
						author = $('#author').val()
						publish = $('#publish').val()
						$(this).parents('.rowinfo').find('.rawinfo').replaceWith(`<td class="rawinfo">${title}</td>`)
						$(this).parents('.rowinfo').find('.rawinfo1').replaceWith(`<td class="rawinfo1">${author}</td>`)
						$(this).parents('.rowinfo').find('.rawinfo2').replaceWith(`<td class="rawinfo2">${publish}</td>`)
						$('#myModal').modal('hide');
					})

				})/*end*/
				$('.top').click(function () {
					var firsttr = $('.rowinfo:first')
					console.log(firsttr.html());
					$(this).parents('.rowinfo').insertBefore(firsttr)
				})/*end*/




				//删除功能
				$('.operate li:nth-child(2)').click(function () {
					$(this).parents('.rowinfo').remove()
					var sumRows = $('table').find('tbody tr').length;
					var sumPages = Math.ceil(sumRows / pageSize);//总页数 
					$('.pagination li').not('.pre1').not('.next1').hide().slice(0, sumPages).show()
					let currentPage = $('.pagination .active a').html() - 1


					let num = $('table').find('tbody tr').slice(currentPage * pageSize, (currentPage + 1) * pageSize).length
					console.log(num);

					if (num == 0) {
						let arr = $('.pagination li').not('.pre1').not('.next1')
						if (currentPage > 0) {
							$(arr[currentPage - 1]).addClass('active');
							console.log(currentPage);
							currentPage = currentPage - 1

						}


					}



					$('table').find('tbody tr').hide().slice(currentPage * pageSize, (currentPage + 1) * pageSize).show();


				})
				//分页功能
			},/*成功的回掉*/

			error: function (error) {
				console.log(error.responseText);
			}
		});
	}

	$('.adduser').click(function () {
		$('.col-md-2 .list-group a').removeClass('active')
		$(this).addClass('active')
	})
	ajax();


	//选项卡切换
	$('.select li').click(function () {
		let index = $(this).index()
		let operate = ['.search', '.addcontent']
		if (index == 1) {
			$(operate[index - 1]).hide()
			$(operate[index]).show()
			$('.leftselect a').removeClass('active')
			$('.leftselect a').eq(index).addClass('active');
		} else {
			$(operate[index]).show()
			$(operate[index + 1]).hide()
			$('.leftselect a').removeClass('active')
			$('.leftselect a').eq(index).addClass('active');
		}
		$('.select li').removeClass('active')
		$(this).addClass('active')


	})
	$('.leftselect a').click(function () {
		$('.leftselect a').removeClass('active')
		$(this).addClass('active')
		let index = $(this).index()
		let operate = ['.search', '.addcontent']
		if (index == 1) {
			$(operate[index - 1]).hide()
			$(operate[index]).show()
			$('.select li').removeClass('active')
			$('.select li').eq(index).addClass('active');
		} else {
			$(operate[index]).show()
			$(operate[index + 1]).hide()
			$('.select li').removeClass('active')
			$('.select li').eq(index).addClass('active');
		}

	})//end
	$('.pagination li').not('.pre1').not('.next1').click(function () {
		$('.pagination li').removeClass('active')
		$(this).addClass('active')
	})
</script>